fix: Organization Users page needs responsiveness #10413
Conversation
WalkthroughThis pull request introduces several layout and styling modifications across multiple UI components. The changes enhance how user information is displayed by adjusting flex and grid layouts, adding wrapping capabilities, and applying text truncation styles. These updates affect pages in the Organization and Facility settings as well as common components for user display, without altering any functional logic or public APIs. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/pages/Facility/settings/locations/LocationView.tsx (4)
98-98: Remove unnecessary flex-wrap property.The
flex-wrapproperty has no effect on aflex-colcontainer since columns don't wrap. Consider simplifying to:- <div className="my-4 flex flex-col flex-wrap"> + <div className="my-4 flex flex-col">
99-101: Simplify nested flex containers.While the flex-wrap properties improve responsiveness, the nested structure with multiple flex containers is redundant. Consider simplifying:
- <div className="py-2 flex flex-wrap justify-between"> - <div className="flex flex-col flex-wrap justify-between items-start gap-4"> - <div className="flex flex-wrap items-center gap-4 py-2"> + <div className="py-2 flex flex-wrap items-start justify-between gap-4"> + <div className="flex flex-wrap items-center gap-4">
120-120: Remove unnecessary flex properties from search input.The flex-wrap properties on both the container and input element don't contribute to the layout:
- <div className="flex flex-wrap w-72"> + <div className="w-72"> <Input placeholder={t("search_by_name")} value={searchQuery} onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }} - className="w-full flex flex-wrap" + className="w-full" />Also applies to: 128-128
139-139: Remove trailing space in className.The button styling is good for touch targets, but there's an unnecessary trailing space in the className:
- <Button variant="outline" className="py-2 my-2 "> + <Button variant="outline" className="py-2 my-2">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/Facility/settings/locations/LocationView.tsx(3 hunks)src/pages/Organization/OrganizationUsers.tsx(2 hunks)src/pages/Organization/components/AddUserSheet.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/pages/Organization/components/AddUserSheet.tsx
- src/pages/Organization/OrganizationUsers.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (1)
src/pages/Facility/settings/locations/LocationView.tsx (1)
98-151: LGTM! The responsive layout improvements are well implemented.The changes successfully improve the mobile responsiveness of the location view. While there are some opportunities to optimize the flex properties as noted above, the overall direction is good.
|
Include #10429 as well 👍 |
src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
Show resolved
Hide resolved
Add this issue number in the description as well. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx (1)
146-152: Consider improving text truncation for user details.While the container has the
truncateclass, the name and email might still overflow. Consider adding individual truncation.<div className="flex flex-col truncate"> - <span className="font-medium text-lg"> + <span className="font-medium text-lg truncate"> {selectedUser.first_name} {selectedUser.last_name} </span> - <span className="text-sm text-gray-500"> + <span className="text-sm text-gray-500 truncate"> {selectedUser.email} </span> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/Common/UserSelector.tsx(1 hunks)src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx(1 hunks)src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx(1 hunks)src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Common/UserSelector.tsx (1)
66-66: LGTM! Good improvement for handling long usernames.The addition of the
truncateclass helps prevent text overflow and improves the responsive design by properly handling long usernames.src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx (1)
69-69: LGTM! Good responsive design improvement.The addition of
flex-wrapensures proper layout on smaller screens by allowing the title and action buttons to wrap when needed, preventing horizontal overflow.src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx (1)
139-139: LGTM! Good responsive design improvements.The changes improve the handling of long text content and ensure proper wrapping on smaller screens:
- Added
flex-wrapfor better layout flexibility- Added
truncateclasses to prevent text overflowAlso applies to: 145-145, 156-156
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Users/UserListAndCard.tsx (1)
67-70: Good improvement to badge responsiveness!The addition of
text-wrapimproves the badge's responsive behavior. However, consider usingbreak-wordsinstead oftext-wrapfor better word breaking control, especially for long translations of "never_logged_in".- className="bg-gray-100 whitespace-nowrap text-wrap" + className="bg-gray-100 whitespace-nowrap break-words max-w-[200px]"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Users/UserListAndCard.tsx(1 hunks)src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx(1 hunks)src/pages/Organization/components/LinkUserSheet.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/Organization/components/LinkUserSheet.tsx
- src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx
Show resolved
Hide resolved
src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx
Outdated
Show resolved
Hide resolved
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
|
@Tanuj1718 what is the status of the PR |
@nihal467 It is ready for review |
|
LGTM |
|
@Tanuj1718 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
Before Update:
After Update:
EDIT 1: Color of Link User button changed. Now it is same as earlier.
EDIT 2: Fixes #10429
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
These visual enhancements provide a cleaner, more adaptive experience without altering any underlying functionality.